<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxdemo</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">


<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

	
	
function doAjaxQuery(){
	// 使用jquery进行ajax请求处理
	$.ajax({
		   type: "POST",  // 请求类性
		   url: "AjaxQueryDemoAction", // 请求的url
		   data: $("#forma1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
		   dataType:"json", // 响应发挥的数据类型  
		   success: function(data, textStatus, jqXHR){ // 执行成功之后的回调函数
		     // 回调函数的dom操作
		     //清空表格内容，然后进行解析显示
		     //$("#displaytbody").html(strHtml);
		     //解析json数据
		   	console.info(data);
		     /*
		     注意，如果返回数据为文本类型，需要将json字符串转为json对象
		     each函数解析的是json对象，而不是json字符串
		     
		     */
		     //解析拼写的html内容	     
		     var strHtml = "";
		     $.each(data,function(index,eachVal){
		    	 strHtml+="<tr>";
		    	 
		    	 strHtml+="<th scope='row'>";
		    	 strHtml+=(index+1);
		    	 strHtml+="</th>";
		    	 
		    	 strHtml+="<td>";
		    	 strHtml+=eachVal.admin_name;
		    	 strHtml+="</td>";
		    	 
		    	 strHtml+="<td>";
		    	 strHtml+=eachVal.admin_psw;
		    	 strHtml+="</td>";
		    	 
		    	 strHtml+="<td>";
		    	 strHtml+=eachVal.admin_p_address;
		    	 strHtml+="</td>";
		    	 
		    	 strHtml+="</tr>";
		    	 
		    	 
		    	
		     });
		   
		     //把解析的html内容，赋值到表格中
		    $("#displaytbody").html(strHtml);
		   },
		   error:function(data){
			   alert("请求失败"+data);
		   }
		});
}
	
</script>

</head>
<body>
	<form id="forma1" class="form-horizontal" action="LoginAction" method="post">
		<div class="form-group" style="margin-top: 100px;">
			<label class="col-sm-2 control-label col-sm-offset-3">用户名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="admin_name" placeholder="请输入用户名">
			</div>
			<label class="col-sm-2 control-label" id="userMsg"></label>
		
		</div>
		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-2">
				<button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
				
			</div>
		</div>
		
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7" >
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>密码</th>
							<th>头像</th>
						</tr>
					</thead>
					<tbody id="displaytbody">
						
					</tbody>
				</table>
			</div>
		</div>
		
		
		
		
	</form>

</body>
</html>